<template>
	<view>
		<view v-if="flag" class="cartstart">
			购物车空空如也，请<navigator open-type="switchTab" url="../index/index" class="cartstart-s">先选购</navigator>
		</view>
		<view v-else>
			<view class="cartlist" v-for="(item,index) of cartlist" :key="index">
				<view class="cartitem">
					<checkbox-group @change="selected(item)">
						<checkbox class="checked" :checked="item.flag"/>
					</checkbox-group>
					<image :src="item.imgUrl" mode="widthFix"></image>
					<view class="cartitem-right">
						<view class="cartitem-right-name">
							{{item.name}}
						</view>
						<view class="cartitem-textpri">
							￥{{item.price}}
							<text class="cartlist-texto" @click="reduce(item)">-</text>
							{{item.num}}
							<text @click="add(item)">+</text>
						</view>
						<view>
							
						</view>
					</view>
					<text class="cartlist-textt" @click="del(item,index)">删除</text>
				</view>
			</view>
			<view class="cartbottom">
				<checkbox-group class="allBtn" @change="selectedall()">
					<checkbox value="" :checked="allchecked" />
					全选
				</checkbox-group>
				<view class="Settlement-btn">
					总价格：{{totalPrice}}
				</view>
				<button type="primary">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
			return {
				flag: !this.$store.state.cartlist.length,
				cartlist: this.$store.state.cartlist,
				allchecked: false,
			}
		},
		computed: {
			// 计算商品总数量
			// totalNum() {
			// 	let totalNum = 0;
			// 	this.cartlist.map(item => {
			// 		this.flag ? totalNum += item.num : totalNum += 0
			// 	})
			// 	return totalNum
			// },
			//计算商品总价格，记得给数据item项设置默认的flag值，不然单选框的变化不会触发数据的变动，整个总价数就没有变化
			totalPrice() {
				this.cartlist = this.cartlist
				let totalPrice = 0;
				this.cartlist.map(item => {
					item.flag ? totalPrice += item.num * item.price : totalPrice += 0
				})
				return totalPrice
			}
		},
		methods: {
			//单个商品勾选
			selected(item) {
				item.flag = !item.flag
				if (!item.flag) {
					this.allchecked = false 
				}else {
					const test = this.cartlist.every(item => {
						return item.flag === true
					})
					if (test) {
						this.allchecked = true 
					}else {
						this.allchecked = false 
					}
				}
			},
			selectedall() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.cartlist.map(item => {
						item.flag = true
					})
				} else {
					this.cartlist.map(item => {
						item.flag = false
					})
				}
			},
			// 减号操作
			reduce(item) {
				let num = item.num 
				if (num > 1) {
					num -= 1
				}else {
					num =1
					return
				}
				return item.num = num
			},
			// 加号操作
			add(item) {
				let num = item.num 
				num +=1
				return item.num = num
			},
			// 删除操作
			del(item, index){
				this.cartlist.splice(index, 1)
				item.flag = false
				if (this.cartlist.length === 0) {
					this.flag =true
				}
			}
		},
		onShow() {
			try {
				let userid = uni.getStorageSync('userid');
				let token = uni.getStorageSync('token');
			    console.log(userid,token)
				if (userid && token) {
					request({
						url: '/Trolley',
						data: {
							token,
							userid
						}
					}).then(res => {
						
					})
					this.getCartData(userid,token)
				}else {
					// uni.navigateTo({
					// 	url: '/pages/login/Login'
					// })
				}
			}
			catch(e){
				
			}
		}
    }
</script>

<style lang="stylus" scoped>
	.cartstart
		font-size:40rpx
		padding:20rpx
		background:#eee
		.cartstart-s 
			color:#007AFF
			font-weight:bold
	.cartitem
		display:flex
		padding:20rpx
		line-height:100rpx
		image 
			width:200rpx
		.cartitem-right 
			line-height:56rpx
			margin-left:20rpx
			.cartitem-right-name
				width:337rpx
				height:54rpx
				overflow:hidden
				text-overflow:ellipsis
				white-space:nowrap
			.cartitem-textpri
				width:330rpx
				line-height:58rpx
				.cartlist-texto
					margin-left:20rpx
					width:30rpx
					text-align:center
				text 
					background:#007AFF
					color:#fff
					padding:0rpx 18rpx 6rpx 18rpx
					margin:0 10rpx
					border-radius:10rpx
					width:30rpx
					display:inline-block
					line-height:48rpx
		.cartlist-textt
			margin-left:12rpx
			background:red
			color:#fff
			height:40rpx
			line-height:40rpx
			font-size:30rpx
			padding:8rpx 12rpx
			border-radius:10rpx
			margin-top:36rpx
			float:right
	.cartbottom
		border-top:1px solid #ccc
		padding:30rpx
		height:80rpx
		line-height:80rpx
		display:flex
		position:fixed
		bottom:0
		left:0
		.allBtn
			width:160rpx
		.Settlement-btn
			margin-left:106rpx
			width:277rpx
		button 
			float:right
			width:160rpx
</style>
